<template>
  <div id="printTest">

    <div class="barcode_main" v-for="(item,index) in this.barcodeData" :key="index">
      <div class="barcode_body barcode_left">
        <div class="barcode_body_top">
          <div class="name">{{ item.studentName }}</div>
          <div class="code">{{ item.studentCode }}</div>
        </div>
        <div class="barcode_body_bottom">
          <div class="class"> {{ item.specialtyClassName }}</div>
        </div>

      </div>
      <div class="barcode_body barcode_right " style="margin-left: 15px">
        <svg :id="'code'+index"></svg>
      </div>
    </div>
  </div>

</template>

<script>
import JsBarcode from "jsbarcode";

export default {
  name: "barcode",
  props: ["barcodeData"],
  data() {
    return {}
  },
  watch: {
    barcodeData: {
      deep: true,
      handler(nv, ov) {
        console.log(nv)
        if (nv.length) {

          this.JsBarcode(nv)
        }
      }
    }
  },
  created() {
  },
  mounted() {
    this.JsBarcode(this.barcodeData)
  },
  methods: {
    handleParentClick(e) {
      console.log(e)
    },
    JsBarcode: function (nv) {
      for (let i = 0; i < nv.length; i++) {
        let code = nv[i].studentCode
        JsBarcode("#code" + i, code, {
          format: "CODE39",//选择要使用的条形码类型
          width: 2.3,//设置条之间的宽度
          height: 155,//高度
          displayValue: false,//是否在条形码下方显示文字
          // text:"456",//覆盖显示的文本
          // fontOptions:"bold italic",//使文字加粗体或变斜体
          // font:"fantasy",//设置文本的字体
          // textAlign:"left",//设置文本的水平对齐方式
          // textPosition:"top",//设置文本的垂直位置
          // textMargin:5,//设置条形码和文本之间的间距
          // fontSize:15,//设置文本的大小
          // background:"#eee",//设置条形码的背景
          // lineColor:"#2196f3",//设置条和文本的颜色。
          // margin:12//设置条形码周围的空白边距
        });
      }
    }
  },
  computed: {},//计算属性
}
</script>

<style lang="less" scoped>
.aaa {
  margin: 50px 50px;
}

.barcode_main {
  display: flex;
  width: 1228px;
  height: 201px;
  opacity: 1;
  border-radius: 0px;

  .barcode_body {
    width: 591px;
    height: 178px;
    opacity: 1;
    border-radius: 0px;

    margin-left: 12px;
  }

  .barcode_left {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    .barcode_body_top {
      width: 100%;
      height: 45px;
      display: flex;
      justify-content: flex-start;

      .name {
        width: 30%;
        height: 100%;
        line-height: 40px;
        text-align: left;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        opacity: 1;

      }

      .code {
        width: 70%;
        height: 100%;
        line-height: 40px;
        text-align: left;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        opacity: 1;
      }
    }

    .barcode_body_bottom {
      width: 100%;
      height: 45px;

      .class {
        line-height: 40px;
        text-align: left;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: 400;

        color: #000000;
        opacity: 1;
      }

    }
  }

  .barcode_right {

    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}


</style>
